<template>
  <div class="box">
    <div class="boxtop">
      <van-nav-bar title="精准估价">
        <template #left>
          <van-icon
            name="arrow-left"
            color="#fff"
            size="18"
            @click="onClickLeft"
          ></van-icon>
        </template>
      </van-nav-bar>
    </div>
    <div class="center">
      <van-cell-group>
        <van-field
          label="VIN"
          value="只读"
          left-icon="@/assets/号码@2x.png"
          readonly
        >
          <van-icon
            class="iconfont"
            class-prefix="icon"
            slot="left-icon"
            name="@/assets/号码@2x.png"
          ></van-icon>
        </van-field>
        <van-field label="上牌日期" value="只读" readonly>
          <van-icon slot="left-icon" name="@/assets/日期@2x.png"></van-icon
        ></van-field>
        <van-field label="城市" value="只读" readonly>
          <van-icon slot="left-icon" name="@/assets/坐标@2x.png"></van-icon>
        </van-field>
        <van-field label="行驶里程" value="只读" readonly>
          <van-icon
            class="iconfont"
            class-prefix="icon"
            slot="left-icon"
            name="@/assets/公里@2x.png"
          ></van-icon>
        </van-field>
        <van-field label="车身颜色" value="只读" readonly>
          <van-icon
            class="iconfont"
            class-prefix="icon"
            slot="left-icon"
            name="@/assets/汽车@2x.png"
          ></van-icon>
        </van-field>
        <van-field label="过户次数" value="只读" readonly>
          <van-icon
            class="iconfont"
            class-prefix="icon"
            slot="left-icon"
            name="@/assets/过户@2x.png"
          ></van-icon>
        </van-field>
        <van-field label="使用性质" value="只读" readonly>
          <van-icon
            class="iconfont"
            class-prefix="icon"
            slot="left-icon"
            name="@/assets/使用@2x.png"
          ></van-icon>
        </van-field>
      </van-cell-group>
    </div>
    <div class="bottom">
      <van-row>
        <van-col offset="1" span="5">
          <div class="buttonLeft">上一步</div>
        </van-col>
        <van-col offset="8" span="5">
          <div class="buttonRight">精准评估</div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      //   sign: "cc",
    }
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    }
  }
  //   computed: {},
}
</script>
<style lang='less' scoped>
.box {
  height: 20rem;
  background-color: #f6f6f9;
  .center {
    margin-top: 20px;
  }
  .bottom {
    position: absolute;
    bottom: 50px;
    left: 0;
    .buttonLeft {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 170px;
      height: 38px;
      border-radius: 19px;
      border: 1px solid #4397d4;
      background-color: #fff;
      color: #4397d4;
      font-size: 14px;
    }
    .buttonRight {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 170px;
      height: 38px;
      border-radius: 19px;
      background-color: #4397d4;
      color: #ffff;
      font-size: 14px;
    }
  }
}
</style>
